// component/daily-echarts/echarts3/echarts3.ts
import * as echarts from '../../ec-canvas/echarts'
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    data: { type: Array, value: [] },
    title: { type: String, value: "" },
  },
  observers: {
    data: function (t) {
      this.initEcharts(t);
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: { lazyLoad: true },
    list: [],
    villageCollectNum: "",
    villageTotaNum: "",
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initEcharts(data) {
      let count = data.length;
      count = count == 0 ? 1 : count;
      let percent = parseInt(100 * 12 / count);
      if (percent >= 100) {
        percent = 100;
      }
      this.lineComponent = this.selectComponent("#line-chart-3");
      this.lineComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        })
        chart.setOption({
          tooltip: {
            //提示框组件
            trigger: "axis", //触发类型 柱状图
            axisPointer: { type: "" }, //触发效果 移动上去 背景效果
            formatter: function (params) {
              // console.log(params);

              let html =
                params[0].name == 0
                  ? params[0].name + "0:00" + "\n"
                  : params[0].name + ":00" + "\n";
              for (let i = 0; i < params.length; i++) {
                html +=
                  params[i].marker +
                  params[i].seriesName +
                  ": " +
                  params[i].value +"\n"
              }
              return html;
            },
          },
          grid: {
            top: "15%",
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: !0,
          },
          dataZoom:{
            type:'slider',
            height:10,
            bottom:10,
            start:0,
            end:percent
          },
          legend: {
            data: ["耗热量","单位能耗"],
            top: "5%",
            textStyle: { color: "#000" },
          },
          color: ["#FFC001","#5194F8"],
          xAxis: [
            {
              type: "category",
              show: true,
              data: data.map(function (t) {
                return t.heatSourceName;
              }),
              axisTick: { alignWithLabel: true },
              axisLabel: {
                show: true,
                // interval: 0,
                // rotate: 45,
                formatter: function (value) {
                  // 设定最大长度
                  var maxLength = 6; // 最大长度，超过则显示省略号
                  // 检查是否需要截断
                  if (value.length > maxLength) {
                    // 截断并添加省略号
                    return value.substring(0, maxLength).split('').join('\n') + '\n' + '...';
                  } else {
                    // 不需要截断时，直接换行显示完整文本
                    return value.split('').join('\n');
                  }
                }
              },
            },
          ],
          yAxis: [
            {
              name: "耗热量(GJ)",
              type: "value",
              show: true,
              axisLine: { show: true, lineStyle: {} },
              splitLine: { show: false },
              axisLabel: { formatter: "{value}" },
            },
            {
              name: "单位能耗(W/m²)",
              type: "value",
              show: true,
              axisLine: { show: true, lineStyle: {} },
              splitLine: { show: false },
              axisLabel: { formatter: "{value}" },
            }
          ],
          series: [
            {
              type: "bar",
              barWidth: 8,
              name: "耗热量",
              data: data.map(res=>res.日实际能耗),
            },
            {
              type: "bar",
              barWidth: 8,
              name: "单位能耗",
              yAxisIndex:1,
              data: data.map(res=>res.日实际单位能耗),
            }
          ],
        })
        return chart
      })
    },
  },
  lifetimes: {
		attached: function () {
		},
		detached: function () {},
	},
	pageLifetimes: {
		show: function () {
		},
		hide: function () {},
		resize: function () {},
	},
})